<template>
  <div>
    <header-top :headername="topname" v-on:testMethods="headertopback" ref="my_head"></header-top>
    <div @click="btnClick" >按钮</div><br/><br/><br/>
    <div @click="btnClick2" >按钮2</div>
    <!-- <headerTop></headerTop> -->
  </div>
</template>
<script>
import headerTop from './components/header'
export default {
  data () {
    return {
      topname: '标题2'
    }
  },
  methods: {
    btnClick () {
      alert(1)
    },
    btnClick2 () {
      // 父组件调用子 属性/方法
      let a = this.$refs.my_head.getValue()
      // let/const
      alert(JSON.stringify(a))
      // this.$refs.my_head.testClick()
    },
    headertopback (option) {
      debugger
      // json => string  json.stringify
      alert(JSON.stringify(option))
    }
  },
  components: {
    headerTop
  }
}
</script>
<style>

</style>
